<template>
	<view>
		<u-swiper :list="bannerList" :height="400"></u-swiper>

		<view class="bgwhite" style="width:100%;padding:20rpx 0rpx;">
			<view class="flex-between w96" style="font-size: 26rpx;">
				<view style="color:red;">燃气热水器维修</view>
				<view style="color:#999;">成交1115691单</view>
			</view>
		</view>

		<view class="bgwhite">
			<view class="flex-between w96" style="overflow-x: auto;white-space: nowrap; padding-bottom: 20rpx;">
				<view class="attr-item radius20 flex-center"
					style="padding: 20rpx;flex-direction: column;align-items: initial;margin-right: 20rpx;"
					v-for="(item,index) in 10" :class="index==0?'attr_cur':''">
					<view style="font-weight: bold;font-size: 28rpx;">燃气热水器维修</view>
					<view style="color:red;margin-top: 14rpx;">
						<label style="font-size: 32rpx;">99</label>
						<label style="font-size: 24rpx;">元/台起</label>
					</view>
					<view class="attr-dot" v-if="index==0">
						<u-icon name="checkbox-mark" color="#fff" size="14"></u-icon>
					</view>
				</view>
			</view>
		</view>

		<view class="bgwhite" style="width:100%;padding:20rpx 0rpx;">
			<view class="flex-between w96">
				<u-tag text="满30减20" mode="light" type="error" />
				<u-icon name="arrow-right" label="去领券" label-pos="left" color="red" label-color="red" size="16"
					label-size="24"></u-icon>
			</view>
		</view>

		<view class="bgwhite w96 radius20" style="padding:16rpx 0rpx;margin-top: 20rpx;">
			<view class="w96">
				<view class="flex-between" style="padding:16rpx 0rpx;">
					<view>
						<u-icon name="map" label="广州市白云区梅花园" color="#2e80fe" label-color="#000" size="28"
							label-size="26"></u-icon>
					</view>
					<u-icon name="arrow-right" label="可服务" color="#999" label-color="#2e80fe" size="16" label-size="24"
						label-pos="left"></u-icon>
				</view>
			</view>

			<view class="w96">
				<view class="flex-between" style="padding:16rpx 0rpx;">
					<view>
						<u-icon name="clock" label="明天(周五)09:00-10:00" color="#2e80fe" label-color="#000" size="28"
							label-size="26"></u-icon>
					</view>
					<u-icon name="arrow-right" color="#999" label-color="#2e80fe" size="16" label-size="24"
						label-pos="left"></u-icon>
				</view>
			</view>
		</view>

		<view class="bgwhite w96 radius20" style="padding:16rpx 0rpx;margin-top: 20rpx;">
			<view class="w96">
				<u-tabs :list="list" :is-scroll="false" :current="current" @change="change"></u-tabs>
			</view>

			<view class="w96" v-if="current==0">

				<!-- 服务评价 -->
				<view class="evaluate">
					<!-- 评价列表 -->
					<view class="evaluateList">

						<view class="item" v-for="(item,index) in 10" :key="index">
							<!-- 用户 -->
							<view class="name">
								匿名客户
							</view>
							<!-- 满意图标 -->
							<view
								style="width:100%;height: 50rpx;display: flex;justify-content: flex-start;align-items: center;">
								<u-rate :count="5" :readonly="true"></u-rate>
							</view>
							<!-- 评价内容 -->
							<view class="content">
								不错不错真不错
							</view>
							<view class="time">
								2022-12-22
							</view>
						</view>
					</view>

				</view>

			</view>
			<view class="w96" v-if="current==1">
				2222
			</view>
			<view class="w96" v-if="current==2">
				<u-collapse>
					<u-collapse-item :title="item.head" v-for="(item, index) in itemList" :key="index">
						{{item.body}}
					</u-collapse-item>
				</u-collapse>
			</view>
		</view>
		
		<view style="width:100%;height: 150rpx;"></view>

		<view class="bottom-view">
			<view class="bottom-left">
				<u-icon name="server-fill" size="40" label="客服" labelSize="20" labelPos="bottom"
					@click="tel('13702348416')"></u-icon>
					<u-icon name="shopping-cart" size="40" label="购物车" labelSize="20" labelPos="bottom" @click="toIndex"></u-icon>
			</view>
			<view style="display: flex;align-items: center;flex-grow: 1;justify-content: flex-end;">
				<view style="background: #ddefff; color:#2979ff;border-radius: 40rpx;padding: 20rpx 25rpx;text-align: center;font-weight: bold;font-size: 24rpx;">
					加入购物车
				</view>
				<view style="background: red;color:#fff;border-radius: 40rpx;padding: 20rpx 80rpx;text-align: center;font-weight: bold;font-size: 24rpx;margin-left: 20rpx;margin-right: 20rpx;">
					立即预约
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				current: 0,
				list: [{
						name: '用户评论'
					},
					{
						name: '服务内容'
					},
					{
						name: '收费标准'
					}
				],
				bannerList: ['https://cdn.uviewui.com/uview/swiper/1.jpg', 'https://cdn.uviewui.com/uview/swiper/2.jpg'],
				itemList: [{
					head: "赏识在于角度的转换",
					body: "只要我们正确择取一个合适的参照物乃至稍降一格去看待他人，值得赏识的东西便会扑面而来",
					open: true,
					disabled: true
				}, {
					head: "生活中不是缺少美，而是缺少发现美的眼睛",
					body: "学会欣赏，实际是一种积极生活的态度，是生活的调味品，会在欣赏中发现生活的美",
					open: false,
				}, {
					head: "周围一些不起眼的人、事、物，或许都隐藏着不同凡响的智慧",
					body: "但是据说雕刻大卫像所用的这块大理石，曾被多位雕刻家批评得一无是处，有些人认为这块大理石采凿得不好，有些人嫌它的纹路不够美",
					open: false,
				}]
			}
		},
		methods: {
			change(index) {
				this.current = index;
			}
		}
	}
</script>

<style>
	.attr-item {
		width: 300rpx;
		height: 130rpx;
		border: 2rpx solid #eee;
	}

	.attr_cur {
		border: 2rpx solid red;
		position: relative;
	}

	.attr-dot {
		position: absolute;
		right: 0rpx;
		bottom: 0rpx;
		background: red;
		border-bottom-right-radius: 20rpx;
		border-top-left-radius: 10rpx;
		width:20rpx;
		height: 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.bottom-view {
		width: 100%;
		position: fixed;
		bottom: 0px;
		height: 120rpx;
		display: flex;
		justify-content: space-between;
		background: #fff;
	}
	
	.bottom-left {
		display: flex;
		width: 30%;
		justify-content: space-around;
	}
</style>

<style lang="less">
	.evaluate {
		width: 100%;
		height: 100%;
		background: #fff;

		.header {
			// height: 200rpx;
			background: #FFFFFF;
			display: flex;
			flex-wrap: wrap;
			gap: 24rpx;
			box-sizing: border-box;
			padding: 24rpx 30rpx;

			view {
				height: 64rpx;
				line-height: 64rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: #999999;
				padding: 0 30rpx 0 28rpx;
				background: #F8F8F8;
				margin: 0;
				border-radius: 8rpx;

			}

			.active {
				color: #46D17E;
				background: #E8FAEF;
			}
		}

		.types {
			width: 750rpx;
			height: 88rpx;
			background: #FFFFFF;
			box-sizing: border-box;
			padding: 0 32rpx;
			display: flex;
			column-gap: 50rpx;
			border-bottom: 2rpx #F8F8F8 solid;
			border-top: 2rpx #F8F8F8 solid;

			.types-item {
				font-size: 24rpx;
				font-weight: 400;
				color: #666666;
				line-height: 88rpx;
			}

			.active {
				color: #46D17E;
			}

		}

		.evaluateList {
			.item {
				width: 100%;
				box-sizing: border-box;
				padding: 32rpx;
				position: relative;
				border-bottom: 2rpx #F8F8F8 solid;

				.name {
					font-size: 28rpx;
					font-weight: 500;
					color: #000000;
				}

				.icon {
					width: 104rpx;
					height: 40rpx;
					position: absolute;
					top: 30rpx;
					left: 224rpx;


					image {
						position: absolute;
						width: 100%;
						height: 100%;
					}

					text {
						position: absolute;
						font-size: 24rpx;
						font-weight: 500;
						color: #FFFFFF;
						left: 13rpx;
						top: 4rpx;
						// left: 50%;
						// top: 50%;
						// transform: translate(-50%,-50%);
					}
				}

				.content {
					font-size: 28rpx;
					font-weight: 400;
					color: #666666;
					// margin-top: 16rpx;
				}

				.time {
					position: absolute;
					top: 32rpx;
					right: 32rpx;
					font-size: 24rpx;
					font-weight: 400;
					color: #999999;

				}

				.imgbox {
					display: flex;
					column-gap: 24rpx;
					flex-wrap: wrap;

					.img {
						width: 213rpx;
						height: 213rpx;
						background: #D8D8D8;
						opacity: 1;
						margin-top: 12rpx;
						border-radius: 12rpx;

						image {
							width: 100%;
							height: 100%;
							border-radius: 12rpx;
						}
					}
				}
			}
		}
	}
</style>
